<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="8">{{this.collected.name}}</el-col>
                <el-col :span="8">
                    <el-input v-model="title" placeholder="请输入文档标题"></el-input>
                </el-col>
                <el-col :span="8">
                    <el-button-group>
                        <el-button round type="success" @click="save">保存文档</el-button>
                        <el-button round type="danger" @click="close">关闭</el-button>
                    </el-button-group>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <v-md-editor v-model="content" height="100%" :disabled-menus="[]" @upload-image="handleUploadImage"></v-md-editor>
        </el-main>
        <!-- <el-footer>
            <el-row>
                <el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false" @close="handleClose(tag)">
                    {{tag}}
                </el-tag>
                <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" @keyup.enter="handleInputConfirm" @blur="handleInputConfirm">
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
            </el-row>
        </el-footer> -->
    </el-container>
</template>

<script>
import { ElMessage } from 'element-plus';
import request from '../../utils/request.js';
import { config } from '@/utils/config';
export default {
    name: 'editor',
    data() {
        return {
            dynamicTags: ['标签一', '标签二', '标签三'],
            inputVisible: false,
            inputValue: '',
            collected: {},
            activeName: 'public',
            tableData: [
                { title: 'UREPORT参数设置方法说明', createUser: '林永忠', updateTime: '2016-05-02' },
                { title: '钻取查询问题解决', createUser: '薛青麟', updateTime: '2016-05-02' }
            ],
            dialogFormVisible: false,
            collectedForm: {
                name: '',
                description: '',
                isOpen: false
            },
            formLabelWidth: '120px',
            content: '',
            title: '',
            docId: '',
            mode: ''
        };
    },
    mounted() {
        console.log('编辑器 config: ' + config().imageServer);

        let token = this.$store.state.user.token;
        console.log('token: ' + token);

        console.log(this.$route.params.collectedId);

        let collectedId = this.$route.params.collectedId;
        let docId = this.$route.params.docId;

        console.log('collectedId:' + collectedId + ' docId:' + docId);
        // 查询文集信息
        request({
            url: '/collected/get',
            method: 'post',
            data: {
                id: this.$route.params.collectedId
            }
        }).then(res => {
            this.collected = res.meta.collected;

            switch (docId) {
                case '_create':
                    this.mode = 'create';
                    break;
                default:
                    request({
                        url: '/doc/getForEdit',
                        method: 'post',
                        data: {
                            id: docId
                        }
                    }).then(res => {
                        if (res.code == 0 && res.meta.doc) {
                            this.content = res.meta.doc.content;
                            this.title = res.meta.doc.title;
                            this.docId = res.meta.doc.id;

                            if (res.meta.doc.isCurrentUserLock) {
                                console.log('当前用户获取锁，准许编辑');
                            } else {
                                console.log('文档已被其他成员锁定，不能编辑');
                                this.lockedAlert(res.meta.user);
                            }
                        }
                    });
                    break;
            }
        });
    },
    components: {},
    methods: {
        // 上传图片
        handleUploadImage(event, insertImage, files) {
            // debugger;
            // 拿到 files 之后上传到文件服务器，然后向编辑框中插入对应的内容
            console.log(files);

            let data = new FormData();
            for (let i = 0; i < files.length; i++) {
                data.append('file', files[i], files[i].name);
            }
            data.append('collectedId', this.collected.id);
            data.append('docId', this.docId);
            data.append('bucketName', '.hidoc');
            return request({
                url: '/i/f/u',
                method: 'post',
                data
            }).then(res => {
                if (res.code == 0) {
                    insertImage({
                        url: config().imageServer + res.data[0].uname,
                        desc: '图片'
                        // width: 'auto',
                        // height: 'auto',
                    });
                }
            });
        },
        // 文档锁定提醒
        lockedAlert(user) {
            let msg = '文档已被其他成员锁定，不能编辑，您可以联系：' + user.name + '解除锁定。';
            this.$alert(msg, {
                confirmButtonText: '关闭',
                callback: action => {
                    window.close();
                }
            });
        },
        handleClose(tag) {
            this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        },

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.dynamicTags.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        // 保存文档
        save() {
            return request({
                url: '/doc/save',
                method: 'post',
                data: {
                    collectedId: this.collected.id,
                    title: this.title,
                    content: this.content,
                    tag: 'tag',
                    mode: this.mode,
                    id: this.docId
                }
            }).then(res => {
                if (res.code == 0) {
                    window.close();
                }
            });
        },
        // 解锁并关闭编辑器
        close() {
            if (this.mode == 'create') {
                console.log('创建时关闭，无需解锁');
                window.close();
            } else {
                return request({
                    url: '/doc/unlock',
                    method: 'post',
                    data: {
                        id: this.docId
                    }
                }).then(res => {
                    if (res.code == 0) {
                        window.close();
                    } else {
                        ElMessage({
                            message: res.msg || 'Error',
                            type: 'error',
                            duration: 5 * 1000
                        });
                    }
                });
            }
        }
    }
};
</script>

<style>
.el-tag + .el-tag {
    margin-left: 10px;
}
.button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
}
</style>